<!DOCTYPE html>
<html lang="en">
	<head>
		<title>asd</title>
		<style>
			#some{
				position: relative;
				margin: 100px auto 0 auto;
				width: 100px;
				height: 20px;
				border-radius: 8px;
				box-shadow: 0px 0px 0px 8px red,
							0px 0px 0px 16px white,
							0px 0px 0px 24px red,
							0px 0px 0px 32px white,
							0px 0px 0px 40px red;
			}
			#some::after{
				content: '';
				position: absolute;
				width: 100px;
				height: ;
			}
		</style>
	</head>

	<body onload="displayImage()">
		
		<div id="some"></div>
		
		<p>原始图片：</p>
		<img id="myPhoto" src="./images/img.jpg" onerror="noPhoto()">
		<p>Canvas图片：</p>
		<canvas id="myCanvas" width="200" height="200"></canvas>
		<button id="btn" onclick="getColorData()">变颜色啦！</button>
		
		<button id="start" class="ui-btn ui-btn-primary" disabled>录音</button>
		<button id="stop" class="ui-btn ui-btn-primary" disabled>停止</button>
		<div id="audio-container"></div>
		<script src="./recorder.js"></script>
		<script>
			window.onload = function(){
				var start = document.querySelector('#start');
				var stop = document.querySelector('#stop');
				var container = document.querySelector('#audio-container');
				var recorder = new Recorder({
					sampleRate: 44100, //采样频率，默认为44100Hz(标准MP3采样率)
					bitRate: 128, //比特率，默认为128kbps(标准MP3质量)
					success: function(){ //成功回调函数
						start.disabled = false;
					},
					error: function(msg){ //失败回调函数
						alert(msg);
					},
					fix: function(msg){ //不支持H5录音回调函数
						alert(msg);
					}
				});
				//开始录音
				//recorder.start();
				//停止录音
				//recorder.stop();
				//获取MP3编码的Blob格式音频文件
				//recorder.getBlob(function(blob){ 获取成功回调函数，blob即为音频文件
				//    ...
				//},function(msg){ 获取失败回调函数，msg为错误信息
				//    ...
				//});
				//getUserMedia() no longer works on insecure origins. To use this feature, you should consider switching your application to a secure origin, such as HTTPS.
				start.addEventListener('click',function(){
					this.disabled = true;
					stop.disabled = false;
					var audio = document.querySelectorAll('audio');
					for(var i = 0; i < audio.length; i++){
						if(!audio[i].paused){
							audio[i].pause();
						}
					}
					recorder.start();
				});
				stop.addEventListener('click',function(){
					this.disabled = true;
					start.disabled = false;
					recorder.stop();
					recorder.getBlob(function(blob){
						var audio = document.createElement('audio');
						audio.src = URL.createObjectURL(blob);
						audio.controls = true;
						container.appendChild(audio);
					});
				});
			};
		</script>
		<script type="text/javascript">
			var c, ctx, myImage;

			function displayImage() {
				myImage = new Image();
				myImage.src = "./images/img.jpg";
				c = document.getElementById("myCanvas");
				if (c.getContext) {
					ctx = c.getContext("2d");
					myImage.onload = function() {
						ctx.drawImage(myImage, 0, 0);
					}
				}
			}

			function getColorData() {
				var r = "255,255,255"; // 替换的颜色

				imageD = ctx.getImageData(0, 0, myImage.width, myImage.height);
				var pdata = imageD.data;
				var first_pdata = pdata.slice(0, 4);
				var colorArr = r.split(",");
				console.log(first_pdata);
				var getpcData = function(cdata, i) {
					let pc = 25;
					return cdata >= (first_pdata[i] - pc) && cdata <= (first_pdata[i] + pc)
				}
				for (var j = 0; j < pdata.length; j += 4) {
					if (
						getpcData(pdata[j], 0, 20) &&
						getpcData(pdata[j + 1], 1, 20) &&
						getpcData(pdata[j + 2], 2, 20)
					) {
						pdata[j] = colorArr[0];
						pdata[j + 1] = colorArr[1];
						pdata[j + 2] = colorArr[2];
					}
				}
				ctx.putImageData(imageD, 0, 0);
			}

			function noPhoto() {
				alert("Please put a .png file in this folder and name it kestral.png.");
			}
		</script>
	</body>
</html>
